{extend name="../application/index/view/index/base.html" /}

{block name="main-content"}
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="#">用户管理</a>
        </li>
        <li class="active">用户信息</li>
    </ul><!-- .breadcrumb -->
</div>
<div class="page-content">
    <style>
        .tr th {
            text-align: center;
        }

        .notice {
            font-size: 16px;
        }

        body {
            min-width: 1080px;
        }
    </style>


    <div class="page-body" style="padding-top: 10px;">
        <div class="table-toolbar">
            <button id="admin_add" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add_admin">
                <i class="icon-plus-sign"></i>添加用户
            </button>

            <!--<input type="text" class="form-control" id="glyphicon-search" placeholder="请输入用户名、手机号或昵称" style="width: 300px;height: 40px;">-->
            <!--<span class="glyphicon glyphicon-search"></span>-->
            <button id="admin_query" class="btn btn-primary btn-sm" style="float: right;margin-right: 24px;">
                <i class="icon-search"></i>查询用户
            </button>
            <input type="text" placeholder="请输入用户名、手机号或昵称" id="query" name="file_id"
                   style="padding-left:8px;width: 300px;height: 34px;float: right">
        </div>
        <table class="table table-striped table-hover table-bordered" id="admin"
               style="margin-top:12px;text-align: center;">
            <thead>
            <tr role="row" class="tr">
                <th>
                    用户名
                </th>
                <th>
                    昵称
                </th>
                <th>
                    密码
                </th>
                <th>
                    手机号码
                </th>
                <th>
                    性别
                </th>
                <th>
                    用户类型
                </th>
                <th>
                    创建时间
                </th>
                <th>
                    操作
                </th>
            </tr>
            </thead>
            <tbody class="admin_tr">

            </tbody>
        </table>
        <div id="pagination_div"></div>
    </div>

</div><!-- /.page-content -->
<div class="modal fade" id="add_admin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ui-widget-content">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    新增信息
                </h4>
            </div>
            <div class="modal-body">
                <div style="margin-top: 10px">
                    <span class="notice">账户：</span>
                    <input type="text" placeholder="账户名必填 只能为字母数字或下划线" id="account" name="file_id"
                           style="padding-left:16px;width: 400px;height: 40px;">
                    <span style="color: red">*</span>
                </div>
                <div style="margin-top: 10px">
                    <span class="notice">昵称：</span>
                    <input type="text" placeholder="昵称必填 长度不能超过20" id="nick_name" name="file_name"
                           style="padding-left:16px;width: 400px;height: 40px;">
                    <span style="color: red">*</span>
                </div>
                <div style="margin-top: 10px">
                    <span class="notice">密码：</span>
                    <input type="password" placeholder="密码必填 长度大于6 小于20" id="password" name="class"
                           style="padding-left:16px;width: 400px;height: 40px;">
                    <span style="color: red">*</span>
                </div>
                <div style="margin-top: 10px">
                    <span class="notice">电话：</span>
                    <input type="text" placeholder="手机号必填 11位数字" id="phone" name="major"
                           style="padding-left:16px;width: 400px;height: 40px;">
                    <span style="color: red">*</span>
                </div>
                <div style="margin-top: 10px">
                    <span class="notice">性别：</span>
                    <label>
                        男
                        <input type="radio" name="gender" value="1" >
                    </label>
                    <label>
                        女
                        <input type="radio" name="gender" value="2" >
                    </label>
                    <!--</div>-->
                    <!--<div style="margin-top: 10px">-->
                    <span class="notice" style="margin-left: 34px;">用户类型：</span>
                    <label>
                        房东
                        <input type="radio" name="type" value="1" >
                    </label>
                    <label>
                        公安
                        <input type="radio" name="type" value="2">
                    </label>
                    <div id="pickPolice" style="display: none;margin-top: 10px;">
                        <div>
                            <span>所在省份：</span><select id="province" style="width: 180px"></select>
                            <span>所在城市：</span><select id="city" style="width: 180px"></select>
                        </div>
                        <div style="margin-top: 10px;">
                            <span>所在区县：</span><select id="region" style="width: 180px"></select>
                            <span>所在分局：</span><select id="police_station" style="width: 180px"></select>
                        </div>

                    </div>


                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="false">取消
                </button>
                <button type="button" class="btn btn-primary" id="true">
                    确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<link href="__PUBLIC__/css/bootstrap-pagination.css" rel="stylesheet"/>
<script src="__PUBLIC__/js/bootstrap-paginator.min.js"></script>
<script id="tpl-user" type="text/html">

    <% for(var i in user) {%>
    <tr class="tr">
        <td class="account"><%= user[i]["account"] %></td>
        <td class="nick_name"><%= user[i].nick_name %></td>
        <td class="password"><%=user[i].password%></td>
        <td class="phone"><%=user[i].phone%></td>
        <td class="sex"><%=user[i].sex%></td>
        <td class="type"><%=user[i].type%></td>
        <td class="create_time"><%=user[i].create_time%></td>
        <td>
            <a href="room_add.html" type="<%=user[i].type%>" class="btn btn-primary btn-xs addRoomInfo">
                添加房间
            </a>
            <button sex="<%=user[i].sex%>" type="<%=user[i].type%>" class="btn btn-info btn-xs revise"
                    data-toggle="modal"
                    data-target="#add_admin">
                <i class="icon-edit"></i>修改
            </button>
            <button class="btn btn-danger btn-xs delete" data-toggle="modal" data-target="#delete">
                <i class="icon-remove"></i>删除
            </button>

        </td>
    </tr>;
    <% } %>
</script>
<script id="tpl-province" type="text/html">
    <option style="display:none">请选择所在省份</option>
    <% for(var i in province) {%>
    <option class="province" value="<%= province[i]['province']%>"><%= province[i]["province"]%></option>
    <% }%>
</script>
<script id="tpl-city" type="text/html">
    <option style="display:none">请选择所在城市</option>
    <% for(var i in city) {%>
    <option class="city" value="<%= city[i]['city']%>"><%= city[i]["city"]%></option>
    <% }%>
</script>
<script id="tpl-region" type="text/html">
    <option style="display:none">请选择所在区/县</option>
    <% for(var i in region) {%>
    <option class="region" value="<%= region[i]['region']%>"><%= region[i]["region"]%></option>
    <% }%>

</script>
<script id="tpl-police" type="text/html">
    <option style="display:none" value='0'>请选择所在分局/派出所</option>
    <% for(var i in police) {%>
    <option class="police" value="<%= police[i]['id']%>"><%= police[i]["policeStation"]%></option>
    <% }%>

</script>

<script>

    $(document).ready(function () {

        var limit = 8;

        //分页
        function initPagination(total) {
            var options = {
                currentPage: 1,
                totalPages: total,
                onPageClicked: function (e, originalEvent, type, page) {
                    genTableContent(page);
                }
            };
            $('#pagination_div').bootstrapPaginator(options);
        }

        function getPageLimit() {
            $.get('/index.php/index/app_user/getPageLimit', {
                input_query: $('#query').val()
            }, function (data) {
                if (data.code == 200) {
                    var count = data.data;
                    var pageSum = Math.ceil(count / limit) == 0 ? 1 : Math.ceil(count / limit);
                    initPagination(pageSum);
                } else {
                    initPagination(1);
                }
            });
        }

        function getQueryPageLimit() {
            $.get('/index.php/index/app_user/getQueryPageLimit', {
                input_query: $('#query').val()
            }, function (data) {
                if (data.code == 200) {
                    var count = data.data;
                    var pageSum = Math.ceil(count / limit) == 0 ? 1 : Math.ceil(count / limit);
                    initPagination(pageSum);
                } else {
                    initPagination(1);
                }
            });
        }

        //查询显示
        function genTableContent(page) {
            var param = {
                page: page,
                limit: limit,
                input_query: $('#query').val()
            };

            $.get('/index.php/index/app_user/admin_query', param, function (data) {
                var space = $("#admin").find('.admin_tr');
                space.empty();
                var data = data.data;
                if (data) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].sex == 1) {
                            data[i].sex = '男'
                        } else {
                            data[i].sex = '女'
                        }

                        if (data[i].type == 1) {
                            data[i].type = '房东'
                        } else {
                            data[i].type = '公安';
                        }
                    }
                }
                var html = template('tpl-user', {
                    user: data
                });
                $(".admin_tr").append(html);
            });
            initPagination();
        }

        //查询用户点击事件
        $('#admin_query').click(function () {
            genTableContent(1);
            getQueryPageLimit();
        });

        //添加用户
        $("#admin_add").click(function () {
            $('#pickPolice').css('display', 'none');
            $('.modal-title').html('新增信息');
            $('#account').removeAttr("readonly");
            $("input[name='gender']").removeAttr("checked");
            $("input[name='type']").removeAttr("checked");
            if ($("input[name='type']").val() != '' || $("input[name='type']").val() != '' || $("#account").val() != '' || $("#nick_name").val() != '' || $("#password").val() != '' || $("#phone").val() != '') {
                $('#account').val('');
                $('#nick_name').val('');
                $('#password').val('');
                $('#phone').val('');
                $("#region").empty();
                $("#police_station").empty();
                $("#province").empty();
                $("#city").empty();
            }
        });

        $("input[name='type'][value='1']").change(function () {

            $('#pickPolice').css('display', 'none');
            $("#region").empty();
            $("#police_station").empty();
            $("#province").empty();
            $("#city").empty();

        });

        //获取所在省份
        $("input[name='type'][value='2']").change(function () {

            $('#pickPolice').css('display', 'block');
            $("#province").empty();
            if (!isAdd) {
                $.post('/index.php/index/app_user/getRegion',
                    {
                        type: 2,
                    }, function (data) {
                        if (data['code'] == 200) {
                            var data = $data.data;
                            var html = template('tpl-province', {
                                province: data,
                            });
                            $("#province").append(html);
                        } else {
                            return;
                        }
                    });
            }
        });

        //获取所在城市
        function getCity(province) {
            $("#city").empty();
            $.post('/index.php/index/app_user/getRegion',
                {
                    province: province
                }, function (data) {
                    if (data['code'] == 200) {
                        var data = data.data;
                        var html = template('tpl-city', {
                            city: data,
                        });
                        $("#city").append(html);
                    } else {
                        return;
                    }
                });
        }

        //获取所在区县
        function getRegion(city) {
            $("#region").empty();
            $.post('/index.php/index/app_user/getRegion',
                {
                    city: city
                }, function (data) {
                    if (data['code'] == 200) {
                        var data = data.data;
                        var html = template('tpl-region', {
                            region: data,
                        });
                        $("#region").append(html);
                    } else {
                        return;
                    }
                });
        }

        //获取所在派出所
        function getPoliceStation(region) {
            $("#police_station").empty();
            $.post('/index.php/index/app_user/getRegion',
                {
                    region: region
                }, function (data) {
                    if (data['code'] == 200) {
                        var data = $data.data;
                        var html = template('tpl-police', {
                            police: data,
                        });
                        $("#police_station").append(html);
                    } else {
                        return;
                    }
                });
        }

        //所在省份联动
        $('#province').change(function () {

            var checkIndex = $(this).get(0).selectedIndex;
            var province = $(this).children().eq(checkIndex).val();
            getCity(province);
        });

        //所在城市
        $('#city').change(function () {

            var checkIndex = $(this).get(0).selectedIndex;
            var city = $(this).children().eq(checkIndex).val();
            getRegion(city);
        });

        //所在区县
        $('#region').change(function () {
            var checkIndex = $(this).get(0).selectedIndex;
            var region = $(this).children().eq(checkIndex).val();
            getPoliceStation(region);
        });

        //确认添加用户和确认修改
        $('#true').click(function () {
            if (isAdd) {
                $.post('/index.php/index/app_user/update',
                    {

                        account: $('#account').val(),
                        phone: $('#phone').val(),
                        nick_name: $('#nick_name').val(),
                        password: $('#password').val()


                    }, function () {
                        genTableContent();
                        layer.msg('修改成功!');
                        $("#add_admin").modal('hide');
                        isAdd = '';
                    })
            } else {
                var police_station_id = $("#police_station option:selected").val();
                if (police_station_id == 0) {
                    police_station_id = null;
                }
                var sex = $("input[name='gender']:checked").val();
                var type = $("input[name='type']:checked").val();
                $.post('/index.php/index/app_user/add',
                    {
                        police_station_id: police_station_id,
                        type: type,
                        sex: sex,
                        account: $("#account").val(),
                        nick_name: $("#nick_name").val(),
                        password: $("#password").val(),
                        phone: $("#phone").val(),
                    }, function (data) {
                        if (data['code'] == 200) {
                            genTableContent();
                            layer.msg("添加成功");
                            $("#add_admin").modal('hide')
                        } else if (data['code'] == 400) {
                            layer.msg(data['msg']);

                        } else {
                            layer.msg(data['msg']);
                        }
                    });
            }
        });

        // 修改用户信息
        var isAdd = '';
        $(document).on("click", ".revise", function () {
            $('#account').attr("readonly", "readonly");
            $('.modal-title').html('修改信息');
            var sex = $(this).attr("sex");
            var type = $(this).attr("type");
            var varible = $(this).parent().parent();
            $("input[name='gender']").attr('disabled',true)
            $("input[name='type']").attr('disabled',true)

            if (sex == '男') {

                $("input[name='gender'][value='1']").prop("checked",true);
            } else {
                $("input[name='gender'][value='2']").prop("checked",true);
            }
            if (type == '房东') {
                $("input[name='type'][value='1']").prop("checked",true);
            } else {
                $("input[name='type'][value='2']").prop("checked",true);
            }
            isAdd = $('#account').val(varible.find('.account').html());
            $('#nick_name').val(varible.find('.nick_name').html());
            $('#password').val(varible.find('.password').html());
            $('#phone').val(varible.find('.phone').html());

        });

        //删除用户
        var delete_admin = '';
        $(document).on('click', '.delete', function () {
            delete_admin = $(this).parent().parent().find('.account').html();
            layer.confirm('是否确认删除？', {
                btn: ['确认', '取消'] //按钮
            }, function () {

                $.post('/index.php/index/app_user/del',
                    {
                        account: delete_admin
                    }, function (data) {
                    if(data.code == 200){
                        layer.msg('删除成功');
                        genTableContent();
                    }

                    })
            })
        });

        var isPolice = '';
        var account = '';
        $(document).on('click', '.addRoomInfo', function () {
            isPolice = $(this).attr('type');
            if (isPolice == '公安') {
                $("a[type='公安']").attr('href', '#');
                layer.msg('只有房东用户才能添加房间')
            } else {
                account = $(this).parent().parent().find('.account').html();
                $(this).attr('href', 'room_add.html?account=' + account);
            }
        });


        $("#query").keydown(function (e) {
            if (e.keyCode == 13) {
                genTableContent(1);
                getQueryPageLimit();
            }
        });
        //页面加载初始化函数
        genTableContent(1);
        getPageLimit();

    });

</script>


{/block}

